<template>
  <div class="sort-content">
    <Header title="文章分类"></Header>
    <div class="header-wrap">
      <p>内容分类</p>
      <ul>
        <li>
          <van-icon name="star" color="#af3c2b" size="1.25rem"/>
          <p>前端</p>
        </li>
        <li>
          <van-icon name="star" color="#af3c2b" size="1.25rem"/>
          <p>后端</p>
        </li>
        <li>
          <van-icon name="star" color="#af3c2b" size="1.25rem"/>
          <p>日记</p>
        </li>
      </ul>
    </div>

    <div class="tag-cloud">
      <p>标签云</p>
      <ul>
        <li v-for="item in 20" :style="{ backgroundColor: getRandomColor() }">js</li>
      </ul>
    </div>


    <Footer></Footer>
  </div>
</template>

<script setup>
import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'



const getRandomColor = () => {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
</script>

<style lang="less" scoped>
.sort-content {
  height: 100vh;

  .header-wrap {
    height: 2.5rem;
    margin: 0.2rem 0;
    border: 1px solid #3f4041;

    p {
      font-size: 20px;
    }

    ul {
      display: flex;
      justify-content: space-around;
      text-align: center;
      margin: 0.2rem 0;

      li {
        p {
          font-size: 14px;
        }
      }
    }
  }

  .tag-cloud {
    height: 4rem;
    width: 100%;

    p {
      font-size: 20px;
    }

    ul {
      display: grid;
      height: calc(4rem - 20px);
      width: 80%;
      font-size: 14px;
      text-align: center;
      grid-template-columns: auto auto auto auto;
      grid-template-rows: auto auto auto;
      grid-gap: 10px;
      margin: 0 auto;
      grid-row-gap: 5px;
      grid-column-gap: 5px;
      overflow: scroll;
      text-overflow: ellipsis;
      li {
        height: 20px;
        line-height: 20px;
        border: 1px solid #525557;
        border-radius: 10%;
        color: #fff;
      }
    }
  }
}
</style>